<template>
  <view class="container">
    <view class="content">
      <view class="header">
        <text class="title">我的收藏</text>
      </view>
      
      <view class="favorite-list" v-if="favoriteList.length > 0">
        <view 
          class="favorite-item" 
          v-for="(item, index) in favoriteList" 
          :key="index"
          @click="viewArticle(item)"
        >
          <image 
            :src="processImageUrl(item.coverImage || defaultCover)" 
            class="article-cover" 
            mode="aspectFill"
          ></image>
          <view class="article-content">
            <text class="article-title">{{ item.title }}</text>
            <view class="article-meta">
              <text class="category">{{ item.category || '健康知识' }}</text>
              <text class="favorite-time">{{ formatDate(item.favoriteTime) }}</text>
            </view>
          </view>
          <view class="action-buttons">
            <button class="remove-btn" @click.stop="removeFavorite(item.id)">取消收藏</button>
          </view>
        </view>
      </view>
      
      <view class="empty" v-else>
        <text class="empty-text">暂无收藏文章</text>
        <button class="browse-btn" @click="goToKnowledge">去浏览文章</button>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from '../../utils/mixin';
export default {
  name: 'FavoritePage',
  mixins: [mixin],
  data() {
    return {
      favoriteList: [],
      defaultCover: 'http://localhost:9001/image/article/67fce526-83ba-49ef-9d14-86ab9a803a2b.png'
    };
  },
  onLoad() {
    this.getFavoriteList();
  },
  methods: {
    getFavoriteList() {
      // 模拟收藏数据
      this.favoriteList = [
        {
          id: 1,
          title: '如何改善睡眠质量：科学方法与实践指南',
          coverImage: '',
          category: '睡眠健康',
          favoriteTime: new Date().toISOString()
        },
        {
          id: 2,
          title: '睡前放松技巧：让身心彻底放松',
          coverImage: '',
          category: '心理健康',
          favoriteTime: new Date(Date.now() - 86400000).toISOString()
        }
      ];
    },
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return this.$formatDate(date, 'yyyy-MM-dd');
    },
    viewArticle(item) {
      uni.navigateTo({
        url: `/pages/knowledge/detail?id=${item.id}`
      });
    },
    removeFavorite(id) {
      uni.showModal({
        title: '确认取消收藏',
        content: '确定要取消收藏这篇文章吗？',
        success: (res) => {
          if (res.confirm) {
            this.favoriteList = this.favoriteList.filter(item => item.id !== id);
            uni.showToast({
              title: '已取消收藏',
              icon: 'success'
            });
          }
        }
      });
    },
    goToKnowledge() {
      uni.navigateTo({
        url: '/pages/knowledge/index'
      });
    }
  }
};
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx;
}

.header {
  padding: 30rpx 0;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.favorite-list {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.favorite-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.favorite-item:last-child {
  border-bottom: none;
}

.article-cover {
  width: 120rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
}

.article-content {
  flex: 1;
}

.article-title {
  display: block;
  font-size: 30rpx;
  color: #333;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.category {
  font-size: 24rpx;
  color: #2979ff;
  background-color: rgba(41, 121, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.favorite-time {
  font-size: 24rpx;
  color: #999;
}

.action-buttons {
  margin-left: 20rpx;
}

.remove-btn {
  background-color: #ff4757;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  border: none;
}

.empty {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  display: block;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.browse-btn {
  background-color: #2979ff;
  color: #fff;
  font-size: 28rpx;
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
  border: none;
}
</style> 